<!DOCTYPE html>
<html>

<head>
    <title>SVG Demo 05</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        div {
            float: left;
        }
    </style>
</head>

<body>
    <h1>Demo05：Path路径</h1>
    <ul>
        <li>横竖如果虚线，则分成段数满足条件(((i+1)/2)%2)==1，所以stroke-dasharray=viewBox.height/i ==>i=129 ==>dasharray=0.9302325581395349</li>
        <li>对角如果虚线，则分成段数满足条件(((i+1)/2)%2)==1，所以stroke-dasharray=Math.sqrt(Math.pow(viewBox.height,2)*2)/i ==>i=129 ==>dasharray=1.315547499881949</li>
        <li>如果横竖对角都要虚线，则两个的stroke-dasharray要相等</li>
    </ul>
    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg" style="border:1px solid red;">
            <line x1="0" y1="60" x2="120" y2="60" stroke="red" stroke-width="0.3" stroke-dasharray="1"></line>
            <line x1="60" y1="0" x2="60" y2="120" stroke="red" stroke-width="0.3" stroke-dasharray="1"></line>

            <line x1="0" y1="0" x2="120" y2="120" stroke="red" stroke-width="0.3" stroke-dasharray="1"></line>
            <line x1="120" y1="0" x2="0" y2="120" stroke="red" stroke-width="0.3" stroke-dasharray="1"></line>
        </svg>
    </div>

    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg" style="border:1px solid red;">
            <line x1="0" y1="60" x2="120" y2="60" stroke="red" stroke-width="0.3"></line>
            <line x1="60" y1="0" x2="60" y2="120" stroke="red" stroke-width="0.3"></line>

            <line x1="0" y1="0" x2="120" y2="120" stroke="red" stroke-width="0.3" stroke-dasharray="1"></line>
            <line x1="120" y1="0" x2="0" y2="120" stroke="red" stroke-width="0.3" stroke-dasharray="1"></line>
        </svg>
    </div>
    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg" style="border:1px solid red;">
            <path d="M 0 60 H 120" stroke="red" stroke-width="0.3"></path>
            <path d="M 60 0 V 120" stroke="red" stroke-width="0.3"></path>

            <line x1="0" y1="0" x2="120" y2="120" stroke="red" stroke-width="0.3" stroke-dasharray="1"></line>
            <line x1="120" y1="0" x2="0" y2="120" stroke="red" stroke-width="0.3" stroke-dasharray="1"></line>
        </svg>
    </div>

    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg" style="border:1px solid red;">
            <path d="M 0 60 L 120 60" stroke="red" stroke-width="0.3"></path>
            <path d="M 60 0 L 60 120" stroke="red" stroke-width="0.3"></path>

            <path d="M 0 0 L 120 120" stroke="red" stroke-width="0.3" stroke-dasharray="1"></path>
            <path d="M 120 0 L 0 120" stroke="red" stroke-width="0.3" stroke-dasharray="1"></path>
        </svg>
    </div>
</body>

</html>